<style scoped>
  input[type = "date"] {
    -webkit-appearance:none;
  }
</style>
<template>
  <div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">手机</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" placeholder="手机号"
                 v-model="personalInfo.personalPhone" required tips="手机号" data-type="phone" @blur="vaildForm($event.target)">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">Email</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="邮箱"
                 v-model="personalInfo.personalMail" required tips="邮箱" data-type="email" @blur="vaildForm($event.target)">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">驾照到期日期</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="date" placeholder="驾照到期日期"
                 v-model="personalInfo.expireDate" required tips="驾照到期日期" @blur="vaildForm($event.target)">
        </div>
      </div>
    </div>
    <div class="weui-btn-area">
      <a class="weui-btn weui-btn_primary" href="javascript:;" @click="editPersnoalInfo">确认修改</a>
    </div>
    <!--正在加载提示框-->
    <loading v-show="loadShow"></loading>
    <!--加载失败弹框-->
    <dialog-box :message="dialogMessage" v-if="dialogShow" @close-dialog="closeDialog" @cancle-dialog="closeDialog"></dialog-box>
    <!--表单发送成功提示框-->
    <toast v-show="toastShow"></toast>
    <!--表单验证是的提示框-->
    <transition name="slide">
      <tips v-show="tipsShow" :tips="tipsMessage"></tips>
    </transition>
  </div>
</template>
<script>
  import interfaceAPI from '../../assets/js/insterface.js';
  import http from '../../assets/js/http_mixin'
  import vaild from '../../assets/js/vaild_form'
  import getQuery from '../../assets/js/get_querys'
  var editInfoUrl = interfaceAPI.editInfoUrl;
  export default {
    data(){
      return {
        'personalInfo': {
          'personalPhone': '',        // 手机号
          'personalMail': '',         // 邮箱号
          'expireDate': ''          // 驾照到期日期
        }
      }
    },
    mixins: [http, getQuery, vaild],
    methods: {
      editPersnoalInfo(){
        // 首先验证
        var oInput = document.getElementsByTagName('input');
        if (!this.vaildForm(oInput)) {
          return false
        }
        // 发送表单信息
        this.getInfo({
          url: editInfoUrl,
          param: {
            'empNum': this.personalId,
            'phone': this.personalInfo.personalPhone,
            'email': this.personalInfo.personalMail,
            'expireDate':this.personalInfo.expireDate
          },
          success: function (response) {
            if (response.body.resultCode === '1') {
              this.toastShow = true;
              this.$router.push({path: 'profile', query: {empNo: this.personalId}});
            } else {
              this.dialogMessage = response.body.resultMsg;
              this.dialogShow = true;
            }
          },
          fail: function (response) {
            this.dialogMessage = '请求失败，请稍后再试';
            this.dialogShow = true;
          }
        });
      },
    },
    mounted(){
      document.title = '编辑个人信息';
      var query = this.getQuerys();
      this.personalId = query.empNo;
      this.personalInfo.personalPhone = query.phone;     // 读取手机号
      this.personalInfo.personalMail = decodeURIComponent(query.email);      // 读取邮箱
      this.personalInfo.expireDate = query.expireDate;        // 读取驾照日期
    }
  }
</script>
<style scoped>
  .weui-cells {
    margin-top: 1.17647059em;
    background-color: #FFFFFF;
    line-height: 1.41176471;
    font-size: 17px;
    overflow: hidden;
    position: relative;
  }

  .weui-cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .weui-label {
    display: block;
    width: 105px;
    word-wrap: break-word;
    word-break: break-all;
  }

  .weui-cell__bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }

  .weui-input {
    width: 100%;
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    background-color: transparent;
    font-size: inherit;
    color: inherit;
    height: 1.41176471em;
    line-height: 1.41176471;
  }

  .weui-cells:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .weui-cells:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .weui-cell:before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: 15px;
  }

  .weui-btn-area {
    margin: 1.17647059em 15px 0.3em;
  }

  .weui-btn {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    line-height: 2.55555556;
    border-radius: 5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow: hidden;
  }

  .weui-btn_primary {
    background-color: #009e4c;
  }
  input[type='date']{
    background: url('../../assets/images/cal_03.png') no-repeat right center;
    background-size: 1.8rem;
  }
</style>
